Day16 CSS語法(下)

2024 iThome 鐵人賽

DAY 16

佛心分享-IT 人自學之術

新手踏入網頁前端的世界系列第 16 篇

16th鐵人賽

zhiz

2024-09-20 22:42:03

32 瀏覽

分享至

今天將介紹如何匯入外部的CSS檔案

以下介紹兩種方式：

在<head>標籤內寫入<style>標籤，並且在裡面寫入@import url ("檔案路徑")。
在<head>標籤內寫入<link>標籤，並且在裡面寫入rel="stylesheet"代表載入的文件是樣式表，以及寫入href="檔案路徑"。

接下來介紹CSS選擇器的宣告

透過這些不同的選擇器宣告方式，能更方便的去美化網頁畫面。
以下介紹5種方式：

類型選擇器
寫入想要改變樣式的HTML標籤，昨天介紹的第一個CSS寫法就是屬於這個類型。
類別選擇器
以類別(class)來選擇要改變樣式的內容，寫法是 .(英文句號)加上自訂的類別名稱。
實作範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS語法</title>
    <style>
        h2{
            font-size: 35px;
        }

        .title{
            color: #008080;
            font-family: "標楷體";
            font-size: 30px;
        }
        .content{
            color: #0000FF;
            font-family: "新細明體";
            font-size: 25px;
        }

    </style>

</head>
<body>
    <h2>社團博覽會</h2>
    <p class="title">【體能性社團】</p>
    <p class="content">桌球社、羽球社、射箭社</p>
    <p class="title">【音樂性社團】</p>
    <p class="content">吉他社、熱音社、管樂社</p>
    


</body>
</html>

ID選擇器
以ID來選擇要改變樣式的內容，寫法是 # 加上自訂的名稱。
實作範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS語法</title>
    <style>
        h2{
            font-size: 35px;
        }
        #PE{
            color: #00cede;
            font-family: "新細明體";
            font-size: 25px;
        }
        #MUSIC{
            color: #6495ed;
            font-family: "新細明體";
            font-size: 25px;
        }

    </style>
</head>
<body>
    <h2>【社團】</h2>
    <p id="PE">桌球社、羽球社、射箭社</p>
    <p id="MUSIC">吉他社、熱音社、管樂社</p>
    
</body>
</html>